<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map,
      #canvas {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
      #canvas {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
      }
      .overview-map {
          position: absolute;
          bottom: 0;
          right: 0;
          background: rgba(255,255,255, 1);
          border: 1px solid red;
          white-space: nowrap;
      }

      .mapboxgl-ctrl-scale {
          background-color: transparent;
          color: red;
          border-color: red;
      }
      .overview-mask {
          background-color: red;
          opacity: 0.5;
          position: absolute;
          z-index: 99;
      }
  </style>
</head>
<body>
<div id="map">
  <canvas id="canvas"></canvas>
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var style = {
        "version": 8,
        "name": "lzugis",
        "sources": {
            "XYZTile": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "XYZTile",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.45,
        minZoom: 2,
        maxZoom: 18
    });
    map.on('load', () => {
        map.addSource('geojson', {
            type: 'geojson',
            data: 'data/china.geojson'
        })
        map.addLayer({
                'id': 'geojson',
                'source': 'geojson',
                'type': 'fill-extrusion',
                'paint': {
                    'fill-extrusion-color': [
                        'case',
                        ['<', ['get', 'height'], 800], '#FFff00',
                        ['<', ['get', 'height'], 1200], '#FFD273',
                        ['<', ['get', 'count'], 1600], '#ff0000',
                        '#b80d0d' // 默认值
                    ],
                    'fill-extrusion-height': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15, 0, 15.05,
                        ['get', 'height']
                    ],
                    'fill-extrusion-opacity': 0.6
                }
            },
            labelLayerId
        );
    })
</script>
</body>
</html>